<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>


    <style>
        .dropbtn {
            background-color: #04AA6D;
            color: white;
            padding: 16px;
            cursor: pointer;
        }

        .dropbtn:hover,
        .dropbtn:focus {
            background-color: #3e8e41;
        }

        .dropdown {
            float: right;
            position: relative;
            display: inline-block;
            position: sticky;
            top: 0;
        }

        .dropdown-content {
            display: none;
            position: absolute;
            background-color: #f1f1f1;
            min-width: 160px;
            overflow: auto;
            box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
            right: 0;
            z-index: 1;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: rgba(255, 255, 255, 0.22);
        }

        .dropdown-content a {
            color: black;
            padding: 12px 16px;
            text-decoration: none;
            display: block;
        }

        .dropdown a:hover {
            background-color: #ddd;
        }

        .show {
            display: block;
        }
    </style>
    <h2>Aligned Dropdown Content</h2>
    <p>Use <strong>float: right</strong> on the dropdown class to float the dropdown menu to the right, and
        <strong>right:0</strong> on the dropdown-content if you want the dropdown content to go from right to left.
    </p>

    <div class="dropdown">
        <button onclick="myFunction()" class="dropbtn">Dropdown</button>
        <div id="myDropdown" class="dropdown-content">
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
        </div>
    </div>


    <style>
        img {
            width: 100%;
        }
    </style>
    <img src="../img/Tesla (12).jpeg" alt="">




    <xmp style="font-size: 22px; font-weight: bolder;  margin-bottom: 66px;  color: black;  font-family: '微软雅黑';">
        必知必会

        关键性代码:
        按钮点击时候发生的背景色变化
        .dropbtn:focus {
              background: xxxx;
        }
        function myFunction() {
              document.getElementById("myDropdown").classList.toggle("show");
        }

        // Close the dropdown if the user clicks outside of it
        // 点击按钮的外面也可以关闭下拉菜单
        document.body.onclick = function (event) {
            if (!event.target.matches('.dropbtn')) {
                document.getElementById("myDropdown").classList.remove("show");
    </xmp>

    <script>
        /* When the user clicks on the button, 
        toggle between hiding and showing the dropdown content */
        function myFunction() {
            document.getElementById("myDropdown").classList.toggle("show");
        }

        // Close the dropdown if the user clicks outside of it
        document.body.onclick = function (event) {
            if (!event.target.matches('.dropbtn')) {
                document.getElementById("myDropdown").classList.remove("show");
                // let dropdowns = document.getElementsByClassName("dropdown-content");
                // for (let i = 0; i < dropdowns.length; i++) {
                //     let openDropdown = dropdowns[i];
                //     if (openDropdown.classList.contains('show')) {
                //         openDropdown.classList.remove('show');
                //     }
                // }
            }
        }
    </script>

</body>

</html>